<template>
  <div id="app">
    <img :class="imgClass" v-for="img in images" :src="img.imageUrl" />
    <button :class="btnClass" @click="loadImg">再来一波</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return{
      images:[],
      imgClass:'myImg',
      btnClass:'btn',
    }
  },
  //页面元素监听
  mounted() {
    this.loadImg();
  },
  methods:{
    //axios 使用axios发送请求，可选的参数中url表示请求路径，method表示请求方式，data请求参数
    //then 表示请求成功后回调，回调方法中的参数res表示响应对象
    //catch  表示请求异常后回调  回调方法中的参数err表示异常对象

    loadImg:function () {
      //this表示vue对象，赋值给局部变量vm
      let vm = this;
      this.axios({
        url:'https://www.mxnzp.com/api/image/girl/list/random?app_id=ypawwbi0iheosmql&app_secret=dGdHaHBkZllocDRCNjdnOU5IZmR4UT09',
        method:'GET',
      }).then(function (res) {
        console.log(res.data.data);
        vm.images.push(...res.data.data);
      }).catch(function (err) {
        console.log(err);
      });
    }
  },
}
</script>

<style>
.myImg{
  width:192px;
  height:108px;
  border: antiquewhite 1px solid;
  margin: 4px 8px;
  border-radius: 5px;
}
.btn{
  position:fixed;
  bottom: 10px;
  right: 10px;
  height: 80px;
  width: 80px;
  line-height: 80px;
  text-align: center;
  border-radius: 50%;
  background-color: rgba(0,0,0,0.4);
  color: white;
}
</style>
